<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .hide{display: none;}
    .show{display: block;}
  </style>
</head>
<body>
  <div class="nav">
    <ul>
      <li>
        <a href="##">一级菜单</a>
        <ul class="hide">
          <li><a href="##">二级菜单</a></li>
          <li><a href="##">二级菜单</a></li>
          <li><a href="##">二级菜单</a></li>
          <li><a href="##">二级菜单</a></li>
        </ul>
      </li>
      <li>
        <a href="##">一级菜单</a>
        <ul class="hide">
          <li><a href="##">二级菜单</a></li>
          <li><a href="##">二级菜单</a></li>
          <li><a href="##">二级菜单</a></li>
          <li><a href="##">二级菜单</a></li>
        </ul>
      </li>
      <li>
        <a href="##">一级菜单</a>
        <ul class="hide">
          <li><a href="##">二级菜单</a></li>
          <li><a href="##">二级菜单</a></li>
          <li><a href="##">二级菜单</a></li>
          <li><a href="##">二级菜单</a></li>
        </ul>
      </li>
      <li>
        <a href="##">一级菜单</a>
        <ul class="hide">
          <li><a href="##">二级菜单</a></li>
          <li><a href="##">二级菜单</a></li>
          <li><a href="##">二级菜单</a></li>
          <li><a href="##">二级菜单</a></li>
        </ul>
      </li>
      <li>
        <a href="##">一级菜单</a>
        <ul class="hide">
          <li><a href="##">二级菜单</a></li>
          <li><a href="##">二级菜单</a></li>
          <li><a href="##">二级菜单</a></li>
          <li><a href="##">二级菜单</a></li>
        </ul>
      </li>
      <li>
        <a href="##">一级菜单</a>
        <ul class="hide">
          <li><a href="##">二级菜单</a></li>
          <li><a href="##">二级菜单</a></li>
          <li><a href="##">二级菜单</a></li>
          <li><a href="##">二级菜单</a></li>
        </ul>
      </li>
    </ul>
  </div>
</body>
<script>
  var list = document.querySelectorAll(".nav>ul>li");

  // 初始状态下的上一个（默认值）
  var prev = list[0];

  for(var i=0;i<list.length;i++){
    list[i].onclick = function(){
      // 隐藏上一个展开的二级菜单
      prev.children[1].className = "hide";
      // 显示当前点击的这个二级菜单
      this.children[1].className = "show";
      // 将当前显示的这个元素，设置成下次要隐藏的元素
      // （今天是明天的昨天）
      prev = this;
    }
  }

</script>
</html>